<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="admin_name" label="用户名">
            <a-input allow-clear v-model="searchForm.admin_name" placeholder="登录名｜真实姓名" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="group_id" label="角色组">
            <a-select v-model="searchForm.group_id" :style="{ width: '320px' }" placeholder="请选择" :allow-clear="true" @change="refresh">
              <a-option v-for="item of roleList" :value="item.id" :label="item.name" />
            </a-select>
          </a-form-item>
        </a-col>
      </template>
      <template #tableAfterButtons>
        <a-button @click="operate('all', {})" type="outline" >
          <template #icon><icon-bookmark /></template>查看操作记录
        </a-button>
      </template>
      <!-- 状态列 -->
      <template #state="{ record }">
        <a-tag color="green" v-if="record.state == 1">{{ record.state_text }}</a-tag>
        <a-tag color="magenta" v-else>{{ record.state_text }}</a-tag>
      </template>
      <!-- 操作前置扩展 -->
      <template #operationAfterExtend="{ record }">
        <a-button type="primary" size="mini" shape="round" @click="operate('user', record)">记录 </a-button>
      </template>
    </sa-table>
    <!-- 编辑表单 -->
    <edit-form ref="editRef" @success="refresh" />
    <opeartionLog ref="operationRef"></opeartionLog>
    <a-modal :visible="visible" :width="400" :ok-loading="submitLoading" title="输入管理员操作密码" :on-before-ok="handleOk"
      @cancel="handleCancel" title-align="start">
      <div>
        <a-input-password :defaultVisibility="true" v-model="deleteForm.pay_password" placeholder="请输入管理员操作密码"
          allow-clean />
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import systemApi from '@/api/system/system'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import { useRouter } from 'vue-router';
import EditForm from './edit.vue'
import opeartionLog from './operationLog.vue'
import SaTable from '@cps/sa-table/index.vue'
const submitLoading = ref(false)
const router =useRouter()
const crudRef = ref()
const editRef = ref()
const operationRef =ref()
const visible = ref(false)
const searchForm = ref({
  admin_name: '',
  group_id: ''
})
const deleteForm = ref({ //刪除 确认彈窗
  id: '',
  pay_password: '',
})
const options = reactive({
  api: systemApi.getUser,//表格数据接口
  operationColumnWidth: 200,//操作欄
  columnAlign: 'center',
  pageSimple: false,
  add: {//頂部新增按鈕
    show: true,
    auth: ['/core/menu/save'],
    func: async () => {
      editRef.value?.open()
    },
  },
  edit: {//操作欄编辑按鈕
    show: true,
    auth: ['/core/menu/update'],
    func: async (record) => {
      editRef.value?.open('edit')
      editRef.value?.setFormData(record)
    },
  },
  delete: {//操作欄和頂部刪除按鈕
    show: true,
    auth: ['/core/menu/destroy'],
    func: (params) => {
      console.log('+++', params);
      deleteForm.value.pay_password = ''
      deleteForm.value.id = params.ids[0]
      visible.value = true
    }
  },
  isExpand: false,//展開所有子樹
})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 100 },
  { title: '登录名', dataIndex: 'name', width: 180 },
  { title: '真实姓名', dataIndex: 'true_name', width: 100 },
  { title: '管理组', dataIndex: 'group_name', width: 180 },
  { title: '状态', dataIndex: 'state', width: 100 },
  { title: '创建时间', dataIndex: 'create_time', width: 180 },
  { title: '修改时间', dataIndex: 'update_time', width: 180 },
])

const operate=(type,data)=>{
   if(type=='all'){
     router.push({name:'operationLog',query:{type:'user'}})
   }else{
    operationRef.value.open(data)
   }
}
const initPage = async () => { }
// 刪除管理员  确定事件
const handleOk = async (done) => {
  submitLoading.value = true
  if (deleteForm.value.pay_password) {
    try {
      const resp = await systemApi.deleteUser(deleteForm.value)
      Message.success(`刪除成功`)
      submitLoading.value = false
      crudRef.value?.refresh()
      visible.value = false
      done(true)
    } catch {
      submitLoading.value = false
    }
  } else {
    Message.error('请输入操作密码')
    submitLoading.value = false
  }
  done(false)
}
const handleCancel = () => {
  visible.value = false
}
const refresh = async () => {
  crudRef.value?.refresh()
}
const roleList = ref([])
// 获取角色组
const getParams = async () => {
  const { data } = await systemApi.getUserParams()
  roleList.value = data.group
}



onMounted(async () => {
  getParams()
  initPage()
  refresh()
})
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>
